<template>
  <div class="header-info">
      <img class="user-img" :width="32" src="../assets/logo.png" />
      <a-dropdown>
          <span class="user-name">管理员 <DownOutlined/></span>
          <template #overlay>
            <a-menu>
                <a-menu-item>
                    <a-button type="link">退出登录</a-button>
                </a-menu-item>
            </a-menu>
          </template>
      </a-dropdown>
  </div>
</template>

<script lang="ts">
import { DownOutlined } from '@ant-design/icons-vue'
import { defineComponent } from 'vue'
export default defineComponent({
    components: {
        DownOutlined
    },
    setup(){

    }
})
</script>

<style lang="scss">
.header-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 44px;
    .user-name {
        margin-left: 10px;
        margin-right: 5px;
        &:hover {
            cursor: pointer;
        }
    }
    .user-img {
        width: 32px;
        overflow: hidden;
        border-radius: 20px;
        background-color: #eee;
        display: inline-block;
    }
}
</style>